<template>
  <div ref="k" class="el-card is-hover-shadow flex-2">
    <div class="k-title el-card__header">工具排行榜</div>
    <div ref="chartRef" style="width: 100%; height: 80%" />
  </div>
</template>

<script setup lang="ts">
import { useDark, useECharts } from "@pureadmin/utils";
import { ref, computed, onMounted } from "vue";
const { isDark } = useDark();
const theme = computed(() => (isDark.value ? "dark" : "light"));

const chartRef = ref();
const props = defineProps({
  data: { type: Array, default: () => [] }
});

const yData1 = computed(() => {
  const list = props.data.map((item: any) => ({
    value: item.lendCount,
    name: item.toolName
  }));
  list.sort((a, b) => a.value - b.value);
  if (list.length > 50) {
    return list.slice(0, 50);
  }
  return list;
});

const h = parseFloat((14 / 1080) * window.innerHeight);

onMounted(() => {
  const { setOptions } = useECharts(chartRef, {
    theme,
    renderer: "svg"
  });
  setOptions({
    legend: {
      data: ["工具借出"],
      left: "right",
      textStyle: {
        // color: "#ffffff"
      },
      icon: "rect",
      itemWidth: h,
      itemHeight: h
    },
    grid: {
      left: "3%",
      right: "5%",
      bottom: "3%",
      top: "10%",
      containLabel: true
    },
    xAxis: {
      type: "value",
      axisLabel: {
        // color: "#FFFFFF"
      }
    },
    yAxis: {
      type: "category",
      show: false,
      axisLabel: {
        // color: "#FFFFFF"
      }
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      }
    },
    dataZoom: [
      //滑动条
      {
        yAxisIndex: 0, //这里是从X轴的0刻度开始
        show: true, //是否显示滑动条，不影响使用
        type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
        startValue: yData1.value.length, // 从头开始。
        endValue: yData1.value.length - 4 // 一次性展示5个。
      }
    ],
    series: [
      {
        name: "工具借出",
        type: "bar",
        data: yData1.value,
        itemStyle: {
          color: "#1E77FF",
          borderRadius: [0, 10, 10, 0]
        },
        barMaxWidth: 30,
        label: {
          position: "insideLeft",
          show: true,
          formatter: "{b}",
          color: "#ffffff"
        }
      }
    ]
  });
});
</script>
